/**
 * @description 布局设置
 * @author MaoXiangDong
 * @version 2021/3/5
 * @Email: 1257538859@qq.com
 * @WeChat: 19908853414
 */
import screenfull from 'screenfull'
import setting from '@/setting'

const state = {
  collapse: false, // 是否收起菜单
  isMobile: false, // 是否为手机
  isTablet: false, // 是否为平板
  isDesktop: false, // 是否为桌面
  isFullscreen: false, // 是否全屏
  isMobileMenuOpen: false, // 是否收起手机设备菜单
  setting // 布局设置 src/setting/index.js 里面的配置项
}

const mutations = {
  /**
   * @description 设置菜单收起状态 每次设置取反
   * @param {Object} state vuex
   * @param {Boolean} collapse
   * */
  setCollapse: (state, collapse) => {
    state.collapse = collapse !== undefined ? collapse : !state.collapse
  },
  /**
   * @description 设置手机设备菜单收起状态
   * @param {Object} state vuex
   * @param {Boolean} open
   * */
  setMobileMenuOpen: (state, open) => {
    state.isMobileMenuOpen = open
  },
  /**
   * @description 设置设备状态
   * @param {Object} state vuex
   * @param {String} type 设备类型，可选值为 Mobile、Tablet、Desktop
   * */
  setDevice: (state, type) => {
    state.isMobile = false
    state.isTablet = false
    state.isDesktop = false
    state[`is${type}`] = true
  },
  /**
   * @description 设置全屏状态
   * @param {Object} state vuex
   * @param {Boolean} isFullscreen
   * */
  setIsFullscreen: (state, isFullscreen) => {
    state.isFullscreen = isFullscreen
  },
  /**
   * @description 设置布局设置
   * @param {Object} state vuex
   * @param {Object} settingObj 只可单个设置 eg: {logoShow: true}
   * */
  setSetting: (state, settingObj) => {
    for (const key in settingObj) {
      if (state.setting[key]) {
        state.setting[key] = settingObj[key]
      } else {
        state.setting.layout[key] = settingObj[key]
      }
    }
  }
}

const actions = {
  /**
   * @description 监听全屏状态
   */
  watchFullscreen({ commit }) {
    return new Promise(resolve => {
      if (screenfull.enabled) {
        screenfull.on('change', () => {
          if (!screenfull.isFullscreen) {
            commit('setIsFullscreen', false)
          }
        })
      }
      resolve()
    })
  },
  /**
   * @description 切换全屏状态
   */
  switchFullscreen({ commit }) {
    return new Promise(resolve => {
      if (screenfull.isFullscreen) {
        screenfull.exit()
        commit('setIsFullscreen', false)
      } else {
        screenfull.request()
        commit('setIsFullscreen', true)
      }
      resolve()
    })
  },
  /**
   * @description 设置布局设置
   * @param {Object} state vuex
   * @param {Object} settingObj 只可单个设置 eg: {logoShow: true}
   * */
  setSetting: ({ commit }, settingObj) => {
    commit('setSetting', settingObj)
  },
  /**
   * @description 设置菜单收起状态
   * @param {Object} state vuex
   * @param {Boolean} collapse
   * */
  setCollapse: ({ commit }, collapse) => {
    commit('setCollapse', collapse)
  },
  /**
   * @description 设置手机设备菜单收起状态
   * @param {Object} state vuex
   * @param {Boolean} open
   * */
  setMobileMenuOpen: ({ commit }, open) => {
    commit('setMobileMenuOpen', open)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
